<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div
      class="coach_enroll_body"
      v-infinite-scroll="loadingListFn"
      infinite-scroll-disabled="listLoadingKey"
      infinite-scroll-distance="10"
      v-if="volist.length > 0"
    >
      <!-- -->
      <!-- 课程 -->
      <div class="coach_enroll_list">
        <div
          class="coach_enroll_list_item"
          v-for="(item, index) in volist"
          :key="index"
          @click="toEnrollDetailFn(item)"
        >
          <div class="coach_enroll_list_item_img_box">
            <img
              v-if="item.image_path != '' && item.image_path != null"
              class="coach_enroll_list_item_img"
              :src="item.image_path"
            />
            <!-- <img
              v-else
              class="coach_enroll_list_item_img"
              src="../../assets/image/address_icon01.png"
            /> -->
          </div>
          <div class="page_centen">
            <div class="page_centen_left">
              <div class="page_centen_left_p">{{ item.title }}</div>
              <div class="page_centen_left_2">
                时长: {{ item.video_duration }} / 已看:
                {{ item.study_duration || 0 }}
              </div>
            </div>
            <div class="page_centen_riging">
              <div
                class="page_centen_riging_p"
                v-if="item.is_complete == 2 && item.progress == '0%'"
              >
                未完成 {{ item.progress }}
              </div>
              <div
                class="page_centen_riging_p"
                v-if="item.is_complete == 2 && item.progress != '0%'"
              >
                已观看 {{ item.progress }}
              </div>
              <div class="page_centen_riging_ps" v-if="item.is_complete == 1">
                已完成 {{ item.progress }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="coach_enroll_body" v-else>
      <div class="empty_box">
        <img class="empty_icon" src="../../assets/image/empty_icon01.png" />
        <div class="empty_name">暂无课程</div>
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/enroll/coachEnrollList.css" scoped></style>
<script>
import HomeTop from "@/components/homeTop.vue";
import { Toast } from "mint-ui";

export default {
  name: "CoachEnrollList",
  components: {
    HomeTop,
  },
  data() {
    return {
      systemKey: 1,
      activeKey: 2, // 底部组件参数设置
      topTitle: "教练员课程", // 顶部组件参数设置
      volist: [], //
      listLoadingKey: false, // 加载数据控制
      page: 1, // 当前页
      perPage: 10, // 每页数据数
      count: 0, // 数据总条数
      titlet: "",
      id: "",
    };
  },
  created: function () {
    this.page = 1;
    this.getListDataFn();
  },
  methods: {
    //课程列表
    getListDataFn: function () {
      let url = "/mobile/videoList";
      let data = {
        page: this.page,
        perPage: this.perPage,
      };
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res.list);

            if (this.page == 1) {
              this.volist = res.list;
              console.log(this.volist, "his.volist");
              this.volist.forEach((e) => {
                let ms = e.video_duration * 1000;
                let date = new Date(ms);
                // 注意这里是使用的getUTCHours()方法，转换成UTC(协调世界时)时间的小时
                let hour = date.getUTCHours();
                // let hour = date.getHours(); 如果直接使用getHours()方法，则得到的时分秒格式会多出来8个小时（在国内开发基本都是使用的是东八区时间），getHours()方法会把当前的时区给加上。
                let minute = date.getMinutes();
                let second = date.getSeconds();
                e.video_duration = `${hour.toString().padStart(2, "0")}:${minute
                  .toString()
                  .padStart(2, "0")}:${second.toString().padStart(2, "0")}`;

                let mss = e.study_duration * 1000;
                let dates = new Date(mss);
                // 注意这里是使用的getUTCHours()方法，转换成UTC(协调世界时)时间的小时
                let hours = dates.getUTCHours();
                // let hour = date.getHours(); 如果直接使用getHours()方法，则得到的时分秒格式会多出来8个小时（在国内开发基本都是使用的是东八区时间），getHours()方法会把当前的时区给加上。
                let minutes = dates.getMinutes();
                let seconds = dates.getSeconds();
                e.study_duration = `${hours
                  .toString()
                  .padStart(2, "0")}:${minutes
                  .toString()
                  .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
              });
            } else {
              this.volist = this.volist.total_count(res.list);
            }
            this.count = this.total_count;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 滚动加载
    loadingListFn: function () {
      this.listLoadingKey = true;
      if (this.volist.length < this.count) {
        this.page = this.page + 1;
        this.getListDataFn();
      }
    },
    // 查看报名课程详情
    toEnrollDetailFn(item) {
      console.log(item);
      if (item.is_can == 2) {
        Toast({
          message: item.error_msg,
        });
      } else {
        this.$router.push({
          name: "coursevoiel",
          query: {
            id: item.id,
          },
        });
      }
    },
  },
};
</script>
<style scoped>
.home_top {
  background: #1d2043 !important;
}
.page_centen {
  margin: 0 auto;
  height: 1.83rem;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  justify-content: space-around;
}
.page_centen_left {
  /* margin-left: 0.36rem; */
  margin-top: 0.45rem;
}
.page_centen_left_p {
  height: 0.28rem;
  font-size: 0.28rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  line-height: 0.45rem;
}
.page_centen_left_2 {
  height: 0.28rem;
  font-size: 0.28rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 1.11rem;
}
.page_centen_riging {
  margin-top: 0.74rem;
}
.page_centen_riging_p {
  height: 0.3rem;
  font-size: 0.3rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #e90000;
}
.page_centen_riging_ps {
  height: 0.3rem;
  font-size: 0.3rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1db300;
}
.page_body_jia {
  margin: 15% auto 0 auto;
  width: 100%;
}
</style>
